<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 管理系统大布局 - Layui</title>
  <link rel="stylesheet" href="/static/libs/layui/css/layui.css">
</head>

<body>
  <div>
    <div class="layui-container-fluid">
      <!-- 面包屑导航 -->
      <span class="layui-breadcrumb">
        <a href="/main">首页</a>
        <a><cite>商品管理</cite></a>
      </span>
      <!-- /面包屑导航 -->
      <!-- 增加商品按钮 -->
      <div style="margin:15px 0">
        <a href="/itemAdd" class="layui-btn layui-btn-default">增加商品</a>
      </div>
      <!-- /增加商品按钮 -->
      <!-- 商品列表 -->
      <table class="layui-table">
        <thead>
          <tr>
            <th>商品名称</th>
            <th>商品描述</th>
            <th>商品价格</th>
            <th>商品库存</th>
            <th>商品封面</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% for(var i=0; i< items.length;i++) { %>
            <tr>
              <td><%= items[i].itemName %></td>
              <td title="<%= items[i].itemDesc %>">
                <%  if(!items[i].itemDesc) {%>
                  暂无描述
                <%}else if(items[i].itemDesc.length>10){%>
                  <%= items[i].itemDesc.substr(0, 10) +'...' %>
                <%}else{%>
                  <%= items[i].itemDesc %>
                <%}%>
              </td>
              <td><%= items[i].itemPrice %></td>
              <td><%= items[i].itemNum %></td>
              <td>
                <img src="<%= items[i].itemThumb ? items[i].itemThumb : 'https://img0.baidu.com/it/u=1820939238,2677153117&fm=26&fmt=auto&gp=0.jpg'  %>" alt="">
              </td>
              <td>
                <a href="/itemUpdate?id=<%= items[i]._id %>" class="layui-btn layui-btn-warm layui-btn-xs">编辑</a>
                <button _id="<%= items[i]._id %>" class="layui-btn del layui-btn-danger layui-btn-xs">删除</button>
              </td>
            </tr>
          <%}%>
        </tbody>
      </table>
      <!-- /商品列表 -->
      <div id="page"></div>
    </div>
  </div>
  <script src="/static/libs/layui/layui.js"></script>
  <script>
    layui.use(['laypage','jquery','layer'], function(){
      var laypage = layui.laypage;
      var $ = layui.jquery;
      var layer = layui.layer;
      // 删除商品
      $('.del').click(function(){
        // 确认框
        var _this = this;
        layer.confirm('确认删除吗?', {icon: 3, title:'删除商品'}, function(index){
          //do something
          // 发送请求删除 商品
          $.ajax({
            url: '/delItem',
            data: {
              _id: $(_this).attr('_id')
            },
            success: function(res){
              if(res.code === 0) {
                layer.msg(res.msg, {icon: 1,time:1000},function(){
                  // 刷新
                  history.go(0)
                })
              }else{
                layer.msg(res.msg, {icon: 2,time:1000})
              }
            }
          })
          layer.close(index);
        });
      });

      // 渲染分页
      laypage.render({
        elem: "page",
        count: <%= counts %>, // 总条数 一般是后端返回
        limit: 2,
        curr: <%= page %>, // 当前页
        jump: function(obj, first){
          //obj包含了当前分页的所有参数，比如：
          console.log(obj); //得到当前页，以便向服务端请求对应页的数据。
          console.log(first); //得到每页显示的条数
          
          //首次不执行
          if(!first){
            //do something
            location.href = "/itemList?page="+obj.curr+'&pageSize='+obj.limit;
          }
        }
      })

    })
  </script>
</body>

</html>